:root {
  --mx-menu-shadow-color: var(--td-shadow-2);
  --mx-menu-scrollbar-thumb-color: rgba(0, 0, 0, .2);
  --mx-menu-scrollbar-thumb-color-light: rgba(0, 0, 0, .3);
  --mx-menu-scrollbar-thumb-color-pressed: rgba(0, 0, 0, .1);
  --mx-menu-shortcut-text: #424242;
  --mx-menu-shortcut-text-hover: #424242;
  --mx-menu-shortcut-text-active: #424242;
  --mx-menu-shortcut-text-open: #424242;
  --mx-menu-shortcut-text-disabled: #a5a5a5;
  --mx-menu-placeholder-width: 24px;
  --mx-menu-backgroud: var(--td-bg-color-container);
  --mx-menu-hover-backgroud: var(--td-bg-color-container-hover);
  --mx-menu-active-backgroud: var(--td-bg-color-container-active);
  --mx-menu-open-backgroud: var(--td-brand-color-1);
  --mx-menu-open-hover-backgroud: var(--td-brand-color-2);
  --mx-menu-divider: var(--td-border-level-1-color);
  --mx-menu-text: var(--td-text-color-primary);
  --mx-menu-hover-text: var(--td-brand-color-7);
  --mx-menu-active-text: var(--td-brand-color-8);
  --mx-menu-open-text: var(--td-brand-color-7);
  --mx-menu-open-hover-text: var(--td-brand-color-8);
  --mx-menu-disabled-text: var(--td-text-color-disabled);
  --mx-menu-icon-size: var(--td-font-size-body-large);
  --mx-menu-backgroud-radius: var(--td-radius-default);
  --mx-menu-shortcut-backgroud: var(--td-bg-color-component);
  --mx-menu-shortcut-backgroud-hover: var(--td-bg-color-component-hover);
  --mx-menu-shortcut-backgroud-active: var(--td-bg-color-component-active);
  --mx-menu-shortcut-backgroud-disabled: var(--td-bg-color-component-disabled);
  --mx-menu-focus-color: var(--td-brand-color);
  --vue-scroll-rect-scrollbar-thumb-color: rgba(122, 122, 122, .3);
  --vue-scroll-rect-scrollbar-thumb-color-light: rgba(122, 122, 122, .5);
  --vue-scroll-rect-scrollbar-thumb-color-pressed: rgba(112, 112, 112, .2);
  --vue-scroll-rect-scrollbar-thumb-radius: 5px;
  --vue-scroll-rect-scrollbar-thumb-margin: 0px;
  --vue-scroll-rect-scrollbar-size: 8px
}

.vue-scroll-rect {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden
}

.vue-scroll-rect > .scroll-content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.vue-scroll-rect > .scroll-content::-webkit-scrollbar {
  width: 0;
  height: 0
}

.vue-scroll-rect > .scroll-content::-ms-scrollbar {
  width: 0;
  height: 0
}

.vue-scroll-rect > .scroll-content.both {
  overflow: scroll
}

.vue-scroll-rect > .scroll-content.horizontal {
  overflow-x: scroll
}

.vue-scroll-rect > .scroll-content.vertical {
  overflow-y: scroll
}

.vue-scroll-rect:hover > .scrollbar {
  opacity: 1;
  transition: opacity .1s
}

.vue-scroll-rect.always-show-scrollbar > .scrollbar, .vue-scroll-rect .dragging > .scrollbar {
  opacity: 1
}

.vue-scroll-rect.background-clickable > .scrollbar {
  pointer-events: all
}

.vue-scroll-rect > .scrollbar {
  position: absolute;
  opacity: 0;
  transition: opacity 1.5s;
  pointer-events: none
}

.vue-scroll-rect > .scrollbar:hover {
  opacity: 1
}

.vue-scroll-rect > .scrollbar .thumb {
  position: absolute;
  background-color: var(--vue-scroll-rect-scrollbar-thumb-color);
  border-radius: var(--vue-scroll-rect-scrollbar-thumb-radius);
  pointer-events: all
}

.vue-scroll-rect > .scrollbar .thumb:hover {
  background-color: var(--vue-scroll-rect-scrollbar-thumb-color-light)
}

.vue-scroll-rect > .scrollbar .thumb:active {
  background-color: var(--vue-scroll-rect-scrollbar-thumb-color-pressed)
}

.vue-scroll-rect > .scrollbar.horizontal {
  left: 0;
  bottom: 0;
  right: 0;
  height: var(--vue-scroll-rect-scrollbar-size)
}

.vue-scroll-rect > .scrollbar.horizontal .thumb {
  top: var(--vue-scroll-rect-scrollbar-thumb-margin);
  bottom: var(--vue-scroll-rect-scrollbar-thumb-margin)
}

.vue-scroll-rect > .scrollbar.vertical {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--vue-scroll-rect-scrollbar-size)
}

.vue-scroll-rect > .scrollbar.vertical .thumb {
  left: var(--vue-scroll-rect-scrollbar-thumb-margin);
  right: var(--vue-scroll-rect-scrollbar-thumb-margin)
}

.mx-context-menu {
  pointer-events: all;
  display: inline-block;
  overflow: visible;
  position: absolute;
  background-color: var(--mx-menu-backgroud);
  border-radius: var(--mx-menu-backgroud-radius);
  padding: 12px 0;
  box-shadow: var(--td-shadow-2);
  opacity: 1;
  transition: opacity .2s ease-in-out;
  --vue-scroll-rect-scrollbar-thumb-color: var(--mx-menu-scrollbar-thumb-color);
  --vue-scroll-rect-scrollbar-thumb-color-light: var(--mx-menu-scrollbar-thumb-color-light);
  --vue-scroll-rect-scrollbar-thumb-color-pressed: var(--mx-menu-scrollbar-thumb-color-pressed)
}

.mx-context-menu-items {
  position: relative;
  overflow: visible
}

.mx-context-menu-scroll {
  overscroll-behavior: contain
}

.mx-context-menu-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 6px 15px;
  -webkit-user-select: none;
  user-select: none;
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mx-menu-text)
}

.mx-context-menu-item .mx-right-arrow, .mx-context-menu-item .mx-checked-mark {
  fill: var(--mx-menu-text)
}

.mx-context-menu-item:hover {
  background-color: var(--mx-menu-hover-backgroud);
  color: var(--mx-menu-hover-text)
}

.mx-context-menu-item:hover .mx-right-arrow, .mx-context-menu-item:hover .mx-checked-mark {
  fill: var(--mx-menu-hover-text)
}

.mx-context-menu-item:hover .mx-shortcut {
  background-color: var(--mx-menu-shortcut-backgroud-hover);
  color: var(--mx-menu-shortcut-text-hover)
}

.mx-context-menu-item:active {
  background-color: var(--mx-menu-active-backgroud);
  color: var(--mx-menu-active-text)
}

.mx-context-menu-item:active .mx-right-arrow, .mx-context-menu-item:active .mx-checked-mark {
  fill: var(--mx-menu-active-text)
}

.mx-context-menu-item:active .mx-shortcut {
  background-color: var(--mx-menu-shortcut-backgroud-active);
  color: var(--mx-menu-shortcut-text-active)
}

.mx-context-menu-item.open {
  background-color: var(--mx-menu-open-backgroud);
  color: var(--mx-menu-open-text)
}

.mx-context-menu-item.open:hover {
  background-color: var(--mx-menu-open-hover-backgroud);
  color: var(--mx-menu-open-hover-text)
}

.mx-context-menu-item.open .mx-right-arrow, .mx-context-menu-item.open .mx-checked-mark {
  fill: var(--mx-menu-open-text)
}

.mx-context-menu-item.open .mx-shortcut {
  background-color: var(--mx-menu-shortcut-backgroud-open);
  color: var(--mx-menu-shortcut-text-open)
}

.mx-context-menu-item.keyboard-focus {
  background-color: var(--mx-menu-active-backgroud)
}

.mx-context-menu-item.disabled {
  color: var(--mx-menu-disabled-text);
  cursor: not-allowed
}

.mx-context-menu-item.disabled:hover, .mx-context-menu-item.disabled:active {
  background-color: transparent
}

.mx-context-menu-item.disabled .mx-right-arrow, .mx-context-menu-item.disabled .mx-checked-mark {
  fill: var(--mx-menu-disabled-text)
}

.mx-context-menu-item.disabled .mx-shortcut {
  background-color: var(--mx-menu-shortcut-backgroud-disabled);
  color: var(--mx-menu-shortcut-text-second)
}

.mx-context-menu-item .mx-item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 100%
}

.mx-context-menu-item .mx-icon-placeholder {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  overflow: hidden
}

.mx-context-menu-item .mx-icon-placeholder.preserve-width {
  width: var(--mx-menu-placeholder-width)
}

.mx-context-menu-item .icon {
  display: inline-block;
  font-size: var(--mx-menu-icon-size)
}

.mx-context-menu-item .icon.svg {
  width: var(--mx-menu-icon-size);
  height: var(--mx-menu-icon-size)
}

.mx-context-menu-item .label {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-end: 16px
}

.mx-context-menu-item-wrapper {
  position: relative
}

.mx-context-menu-item-sperator {
  display: block;
  padding: 5px 0;
  background-color: var(--mx-menu-backgroud)
}

.mx-context-menu-item-sperator:after {
  display: block;
  content: "";
  background-color: var(--mx-menu-divider);
  height: 1px
}

.mx-right-arrow {
  width: 14px;
  height: 14px
}

.mx-checked-mark {
  width: var(--mx-menu-icon-size);
  height: var(--mx-menu-icon-size)
}

.mx-shortcut {
  position: relative;
  justify-self: flex-end;
  font-size: 11.5px;
  padding: 2px 4px;
  background-color: var(--mx-menu-shortcut-backgroud);
  color: var(--mx-menu-shortcut-text)
}

.mx-menu-bar.dark, .mx-context-menu.dark {
  --mx-menu-backgroud: #303031;
  --mx-menu-hover-backgroud: #636363;
  --mx-menu-active-backgroud: #555555;
  --mx-menu-open-backgroud: #636363;
  --mx-menu-open-hover-backgroud: #636363;
  --mx-menu-divider: #464646;
  --mx-menu-text: #ffffff;
  --mx-menu-hover-text: #ffffff;
  --mx-menu-active-text: #ffffff;
  --mx-menu-open-text: #ffffff;
  --mx-menu-open-hover-text: #ffffff;
  --mx-menu-disabled-text: #9c9c9c;
  --mx-menu-shadow-color: rgba(51, 51, 51, .2);
  --mx-menu-scrollbar-thumb-color: rgba(255, 255, 255, .3);
  --mx-menu-scrollbar-thumb-color-light: rgba(255, 255, 255, .5);
  --mx-menu-scrollbar-thumb-color-pressed: rgba(255, 255, 255, .2);
  --mx-menu-shortcut-backgroud: #505050;
  --mx-menu-shortcut-backgroud-hover: #505050;
  --mx-menu-shortcut-backgroud-active: #505050;
  --mx-menu-shortcut-backgroud-open: #505050;
  --mx-menu-shortcut-backgroud-disabled: #444444;
  --mx-menu-shortcut-text: #f1f1f1;
  --mx-menu-shortcut-text-hover: #ffffff;
  --mx-menu-shortcut-text-active: #ffffff;
  --mx-menu-shortcut-text-open: #ffffff;
  --mx-menu-shortcut-text-disabled: #9d9d9d
}

.mx-menu-bar.flat, .mx-context-menu.flat {
  border-radius: 0;
  padding: 7px 0;
  box-shadow: 0 1px 2px 1px var(--mx-menu-shadow-color)
}

.mx-menu-bar.flat .mx-context-menu-item, .mx-context-menu.flat .mx-context-menu-item {
  padding: 3px 12px
}

.mx-menu-bar.win10, .mx-context-menu.win10 {
  border-radius: 0;
  padding: 8px 0;
  border: 1px solid var(--mx-menu-border-color);
  box-shadow: 2px 2px 1px 0 var(--mx-menu-shadow-color)
}

.mx-menu-bar.win10, .mx-context-menu.win10 {
  --mx-menu-backgroud: #eeeeee;
  --mx-menu-hover-backgroud: #d8d8d8;
  --mx-menu-active-backgroud: #dfdfdf;
  --mx-menu-open-backgroud: #f1f1f1;
  --mx-menu-open-hover-backgroud: #d8d8d8;
  --mx-menu-divider: #aaaaaa;
  --mx-menu-border-color: #b1b1b1;
  --mx-menu-shortcut-backgroud: transparent;
  --mx-menu-shortcut-backgroud-hover: transparent;
  --mx-menu-shortcut-backgroud-active: transparent;
  --mx-menu-shortcut-backgroud-open: transparent;
  --mx-menu-shortcut-backgroud-disabled: transparent;
  --mx-menu-shortcut-text: #272727;
  --mx-menu-shortcut-text-hover: #272727;
  --mx-menu-shortcut-text-active: #272727;
  --mx-menu-shortcut-text-open: #272727;
  --mx-menu-shortcut-text-disabled: #6b6b6b
}

.mx-menu-bar.win10 .mx-context-menu-item, .mx-context-menu.win10 .mx-context-menu-item {
  padding: 2px 4px;
  margin: 0 4px
}

.mx-menu-bar.win10 .mx-context-menu-item-sperator, .mx-context-menu.win10 .mx-context-menu-item-sperator {
  margin: 0 4px
}

.mx-menu-bar.win10.dark, .mx-context-menu.win10.dark {
  --mx-menu-backgroud: #303031;
  --mx-menu-hover-backgroud: #636363;
  --mx-menu-active-backgroud: #555555;
  --mx-menu-open-backgroud: #636363;
  --mx-menu-open-hover-backgroud: #636363;
  --mx-menu-divider: #808080;
  --mx-menu-border-color: #656565;
  --mx-menu-shortcut-backgroud: #505050;
  --mx-menu-shortcut-backgroud-hover: #505050;
  --mx-menu-shortcut-backgroud-active: #505050;
  --mx-menu-shortcut-backgroud-open: #505050;
  --mx-menu-shortcut-backgroud-disabled: #444444;
  --mx-menu-shortcut-text: #f1f1f1;
  --mx-menu-shortcut-text-hover: #ffffff;
  --mx-menu-shortcut-text-active: #ffffff;
  --mx-menu-shortcut-text-open: #ffffff;
  --mx-menu-shortcut-text-disabled: #9d9d9d;
  padding: 8px 0
}

.mx-menu-bar.win10.dark .mx-context-menu-item, .mx-context-menu.win10.dark .mx-context-menu-item {
  padding: 6px 12px;
  margin: 0
}

.mx-menu-bar.win10.dark .mx-context-menu-item-sperator, .mx-context-menu.win10.dark .mx-context-menu-item-sperator {
  margin: 0 7px
}

.mx-menu-bar.mac, .mx-context-menu.mac {
  padding: 8px 0;
  box-shadow: 0 5px 7px 1px var(--mx-menu-shadow-color);
  border: 1px solid var(--mx-menu-border-color)
}

.mx-menu-bar.mac, .mx-context-menu.mac {
  --mx-menu-backgroud: #ececec;
  --mx-menu-hover-backgroud: #0165e1;
  --mx-menu-active-backgroud: #0165e1;
  --mx-menu-open-backgroud: #858585;
  --mx-menu-open-hover-backgroud: #0165e1;
  --mx-menu-divider: #d2d2d2;
  --mx-menu-text: #232323;
  --mx-menu-hover-text: #fff;
  --mx-menu-active-text: #fff;
  --mx-menu-open-text: #fff;
  --mx-menu-open-hover-text: #fff;
  --mx-menu-disabled-text: #bbbbbb;
  --mx-menu-shadow-color: rgba(0, 0, 0, .1);
  --mx-menu-backgroud-radius: 10px;
  --mx-menu-shortcut-backgroud: transparent;
  --mx-menu-shortcut-backgroud-hover: transparent;
  --mx-menu-shortcut-backgroud-active: transparent;
  --mx-menu-shortcut-backgroud-open: transparent;
  --mx-menu-shortcut-backgroud-disabled: transparent;
  --mx-menu-shortcut-text: #424242;
  --mx-menu-shortcut-text-hover: #fff;
  --mx-menu-shortcut-text-active: #fff;
  --mx-menu-shortcut-text-open: #fff;
  --mx-menu-shortcut-text-disabled: #a5a5a5;
  --mx-menu-border-color: #bbbbbb
}

.mx-menu-bar.mac.dark, .mx-context-menu.mac.dark {
  --mx-menu-backgroud: #333333;
  --mx-menu-hover-backgroud: #0153d2;
  --mx-menu-active-backgroud: #0153d2;
  --mx-menu-open-hover-backgroud: #0153d2;
  --mx-menu-open-backgroud: #414346;
  --mx-menu-divider: #575757;
  --mx-menu-text: #dcdcdc;
  --mx-menu-hover-text: #fff;
  --mx-menu-active-text: #fff;
  --mx-menu-open-text: #fff;
  --mx-menu-open-hover-text: #fff;
  --mx-menu-disabled-text: #6a6a6a;
  --mx-menu-shadow-color: rgba(0, 0, 0, .1);
  --mx-menu-backgroud-radius: 10px;
  --mx-menu-shortcut-backgroud: transparent;
  --mx-menu-shortcut-backgroud-hover: transparent;
  --mx-menu-shortcut-backgroud-active: transparent;
  --mx-menu-shortcut-backgroud-open: transparent;
  --mx-menu-shortcut-backgroud-disabled: transparent;
  --mx-menu-shortcut-text: #dadada;
  --mx-menu-shortcut-text-hover: #fff;
  --mx-menu-shortcut-text-active: #fff;
  --mx-menu-shortcut-text-open: #fff;
  --mx-menu-shortcut-text-disabled: #6a6a6a;
  --mx-menu-border-color: #222
}

.mx-menu-bar.mac .mx-context-menu-item, .mx-context-menu.mac .mx-context-menu-item {
  border-radius: 5px;
  margin: 0 6px;
  padding: 3px 6px
}

.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus, .mx-context-menu.mac .mx-context-menu-item.keyboard-focus {
  background-color: var(--mx-menu-active-backgroud);
  color: var(--mx-menu-active-text);
  outline: none
}

.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow, .mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark, .mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-right-arrow, .mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-checked-mark {
  fill: var(--mx-menu-active-text)
}

.mx-menu-bar.mac .mx-context-menu-item.keyboard-focus .mx-shortcut, .mx-context-menu.mac .mx-context-menu-item.keyboard-focus .mx-shortcut {
  background-color: var(--mx-menu-shortcut-backgroud-active);
  color: var(--mx-menu-shortcut-text-active)
}

.mx-menu-bar.mac .mx-context-menu-item-sperator, .mx-context-menu.mac .mx-context-menu-item-sperator {
  margin: 0 12px
}

.mx-context-menu .vue-scroll-rect > .scroll-content {
  overflow-y: scroll;
  height: 100%;
  width: auto;
  position: relative !important
}

.mx-menu-ghost-host {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none
}

.mx-menu-ghost-host.fullscreen {
  position: fixed
}

.mx-menu-bar {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--mx-menu-backgroud);
  padding: 5px 0
}

.mx-menu-bar.mini {
  flex-grow: 0
}

.mx-menu-bar .mx-menu-bar-content {
  display: flex;
  flex-direction: row;
  align-items: center
}

.mx-menu-bar .mx-menu-bar-item {
  padding: 2px 8px;
  border-radius: 5px;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--mx-menu-backgroud);
  color: var(--mx-menu-text)
}

.mx-menu-bar .mx-menu-bar-item:hover {
  background-color: var(--mx-menu-hover-backgroud);
  color: var(--mx-menu-hover-text)
}

.mx-menu-bar .mx-menu-bar-item:hover .mx-menu-bar-icon-menu {
  fill: var(--mx-menu-hover-text)
}

.mx-menu-bar .mx-menu-bar-item:active, .mx-menu-bar .mx-menu-bar-item.active {
  background-color: var(--mx-menu-active-backgroud);
  color: var(--mx-menu-active-text)
}

.mx-menu-bar .mx-menu-bar-item:active .mx-menu-bar-icon-menu, .mx-menu-bar .mx-menu-bar-item.active .mx-menu-bar-icon-menu {
  fill: var(--mx-menu-active-text)
}

.mx-menu-bar .mx-menu-bar-icon-menu {
  fill: var(--mx-menu-text);
  width: var(--mx-menu-icon-size);
  height: var(--mx-menu-icon-size)
}

.mx-menu-bar.flat .mx-menu-bar-item {
  border-radius: 0
}
